import React, { Component } from 'react'

function high(Com) {
    return class NewCom extends Component {
        state = {
            count: 8888
        }

        add = () => {
            this.setState({
                count: this.state.count += 1
            })
        }

        render() {
            const { count } = this.state
            return (
                <div className='box'>
                    <Com count={count} add={this.add} />
                </div>
            )
        }
    }
}


function drag(Com) {
    return class NewCom extends Component {
        state = {
            top: 0,
            left: 0
        }
        // 鼠标按下
        onMouseDown = () => {
            console.log('按下')
            document.body.addEventListener('mousemove', this.onMouseMove)
        }

        // 鼠标移动
        onMouseMove = (ev) => {
            let left = ev.clientX - 10
            let top = ev.clientY - 10
            this.setState({
                top,
                left
            })
            console.log('移动')
        }

        // 鼠标抬起
        onMouseUp = () => {
            console.log('抬起')
            document.body.removeEventListener('mousemove', this.onMouseMove)
        }
        render() {
            const { top, left } = this.state
            return (
                <div style={{
                        top,
                        left,
                        position: "absolute"
                    }}
                    onMouseDown={this.onMouseDown}
                    onMouseUp={this.onMouseUp}>
                    <Com />
                </div>
            )
        }
    }
}

export {
    high,
    drag
}